<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户主页 - 疫苗预约系统</title>
    <link rel="stylesheet" href="../css/common.css?v=20251120_3">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="main-container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="sidebar-header">
                <i class="fas fa-syringe"></i>
                <h2>疫苗预约系统</h2>
                <p id="userRoleText">普通用户</p>
            </div>
            <nav class="sidebar-menu">
                <a href="home.html" class="menu-item active">
                    <i class="fas fa-home"></i>
                    <span>首页</span>
                </a>
                <a href="family.html" class="menu-item">
                    <i class="fas fa-users"></i>
                    <span>家属管理</span>
                </a>
                <a href="appointment.html" class="menu-item">
                    <i class="fas fa-calendar-check"></i>
                    <span>预约管理</span>
                </a>
                <a href="vaccine.html" class="menu-item">
                    <i class="fas fa-vial"></i>
                    <span>疫苗查询</span>
                </a>
                <a href="site.html" class="menu-item">
                    <i class="fas fa-hospital"></i>
                    <span>接种点查询</span>
                </a>
                <a href="profile.html" class="menu-item">
                    <i class="fas fa-user-circle"></i>
                    <span>个人中心</span>
                </a>
            </nav>
        </div>

        <!-- 主内容区域 -->
        <div class="main-content">
            <!-- 顶部导航栏 -->
            <div class="top-navbar">
                <div class="navbar-left">
                    <h1>首页</h1>
                </div>
                <div class="navbar-right">
                    <div class="user-info">
                        <div class="user-avatar" id="userAvatar">U</div>
                        <span class="user-name" id="userName">用户</span>
                    </div>
                    <button class="btn-logout" onclick="handleLogout()">
                        <i class="fas fa-sign-out-alt"></i> 退出登录
                    </button>
                </div>
            </div>

            <!-- 内容区域 -->
            <div class="content-area">
                <!-- 欢迎信息 -->
                <div class="page-header">
                    <h2 class="page-title">欢迎回来，<span id="welcomeName">用户</span>！</h2>
                    <p class="page-subtitle">今天是 <span id="currentDate"></span></p>
                </div>

                <!-- 快捷操作卡片 -->
                <div class="stats-grid">
                    <div class="stat-card" style="cursor: pointer;" onclick="window.location.href='appointment.html'">
                        <div class="stat-icon primary">
                            <i class="fas fa-calendar-plus"></i>
                        </div>
                        <div class="stat-info">
                            <h3>创建预约</h3>
                            <p>预约疫苗接种</p>
                        </div>
                    </div>

                    <div class="stat-card" style="cursor: pointer;" onclick="window.location.href='appointment.html'">
                        <div class="stat-icon success">
                            <i class="fas fa-list-check"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="appointmentCount">0</h3>
                            <p>我的预约</p>
                        </div>
                    </div>

                    <div class="stat-card" style="cursor: pointer;" onclick="window.location.href='family.html'">
                        <div class="stat-icon warning">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="familyCount">0</h3>
                            <p>家属成员</p>
                        </div>
                    </div>

                    <div class="stat-card" style="cursor: pointer;" onclick="window.location.href='vaccine.html'">
                        <div class="stat-icon danger">
                            <i class="fas fa-vial"></i>
                        </div>
                        <div class="stat-info">
                            <h3>疫苗查询</h3>
                            <p>查看可用疫苗</p>
                        </div>
                    </div>
                </div>

                <!-- 最近预约 -->
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">最近预约</h3>
                        <a href="appointment.html" class="btn btn-primary btn-sm">
                            查看全部 <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                    <div class="card-body">
                        <div class="table-container">
                            <table id="recentAppointmentsTable">
                                <thead>
                                    <tr>
                                        <th>预约人</th>
                                        <th>疫苗名称</th>
                                        <th>接种点</th>
                                        <th>预约时间</th>
                                        <th>状态</th>
                                    </tr>
                                </thead>
                                <tbody id="recentAppointmentsBody">
                                    <tr>
                                        <td colspan="5" style="text-align: center; padding: 40px; color: #999;">
                                            <i class="fas fa-inbox" style="font-size: 48px; margin-bottom: 10px; display: block;"></i>
                                            暂无预约记录
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- 系统公告 -->
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">系统公告</h3>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-info">
                            <i class="fas fa-bullhorn"></i>
                            <span>欢迎使用疫苗预约系统！请及时关注疫苗接种信息，做好健康防护。</span>
                        </div>
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle"></i>
                            <span>请在预约时间前30分钟到达接种点，携带有效身份证件。</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="../js/common.js?v=20251120_3"></script>
    <script src="js/home.js?v=20251120"></script>
</body>
</html>
